<template>
  <div class="user-avator-dropdown">
    <label class="loginName-box">{{userName}}</label>
    <Dropdown>

      <Avatar :src="userAvator" />

      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">
        <a @click="logout">
          <DropdownItem name="logout">
            <Icon type="md-exit" />
            退出登录
          </DropdownItem>
        </a>

      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
import './user.less'
import { mapMutations, mapActions } from 'vuex'
export default {
  name: 'User',
  props: {
    userName: String,
    userAvator: {
      type: String,
      default: '',
    },
  },
  methods: {
    ...mapActions(['handleLogOut']),
    logout() {
      this.handleLogOut(this)
    },

    message() {
      this.$router.push({
        name: 'message_page',
      })
    },
  },
}
</script>
<style lang="less" scoped>
.user-avator-dropdown {
  position: absolute;
  top: 0px;
  right: 10px;
}

.loginName-box {
  font-weight: bold;
  color: #4b81d3;
  margin-right: 10px;
}
</style>
